前言

瀏覽器與互聯網的發展，讓前端的技術推陳出新，百花齊放。
過去許多的概念逐漸過時，瀏覽器能夠做的事情越來越多了。除了後端以外，前端也是需要嚴謹的工程化以及架構，才能應付日漸複雜的需求。

這次鐵人賽希望透過介紹各種新、舊的 Javascript 技術，以及講解在一般網頁開發時會遇到的問題以及了解整個瀏覽器、Javascript 的運作、再逐漸帶到近幾年逐漸流行的框架：web-component, ReactJS, Vue。

這並不是一份從 0 到 1 的入門教材，而是記錄自己對於前端開發的理解，並分享一些自己的經驗，因此比較適合有經驗的前端工程師，像是能夠實作基本的切版需求，也有串接過 API 與後端串接的經驗，甚至使用過 React, jQuery 等等。

有鑒於前端要涉及的事情越來越繁雜，在初學階段，甚至一些有經驗的前端工程師也不容易搞清楚到底在做什麼。於是我希望透過這次鐵人賽，把自己所知道的事情，盡量透過簡單清晰的方式分享出來。

技術分為術和道兩種，術是做事的方法，而道是做事的原則。在學習的時候，如果一昧地追求術會過得相當辛苦，因為新的函式庫一直推陳出新，不會有結束的一天。但如果掌握了原則，那麼就算再怎麼變化，還是能夠應付未知的挑戰。

這次的系列也會盡量解釋清楚一些比較底層或比較進階的概念，所以一些人可能要失望了，這裡不會深入介紹太多函式庫（除了 React, Vue 跟 RxJS 以外）。

身為前端工程師，JavaScript 已經是開發時的必需品，也因為網頁與瀏覽器的易用性，讓上手前端的門檻並不高。但任何語言跟實作都是一種抽象化，認識背後的理論，除了出現問題可以更容易知道問題的原因在哪之外，也可以學到很多思考方式。畢竟不管是開發一個網頁應用、SPA、瀏覽器，本質上都會牽扯到軟體設計的知識。

由於前端的戰國時代已經慢慢趨於穩定，當中也會介紹一些常見的技術，讓大家有個敲門磚，也知道以後如果要在實際開發上使用可能需要的工具。

這份教材沒有什麼「新概念」，大部分的概念，你都可以在網路上的文章中找到，在介紹某些觀念時我也會將一些不錯的文章放在段落後。

想要寫好前端沒有捷徑，任何程式語言或領域都一樣，雖然前端因為實作的門檻比較低，而且容易上手，但要深入了解它需要涉及各種不同領域的知識，像是 UI/UX、如何和後端互動、和使用者互動、在不同瀏覽器中盡力達到一致性、如何優雅地處理錯誤、適應各種不同裝置（RWD）、管理複雜的資料流、兼顧效能等等，這就要靠持續學習與經驗的累積了。

發文規劃

1. JavaScript Basic: 介紹一些基礎卻很重要的概念
2. 瀏覽器運作 + Performance：大致了解瀏覽器的運作並且試著從 performance 的角度來看。
3. 安全性：介紹一些前端常見的安全性問題
4. 前端工程化
5. 前端 UI 開發
6. 前端框架淺談：談談 React, Vue 與 custom-element
7. 進階篇：像是 i18n、Functional Reactive Programming、淺淺的密碼學、GraphQL、正規表達式等等，這裏能夠涵蓋的範圍很廣，就看到時候有多少時間產出了。